import loading from '@/assets/loading.svg';
import style from './loading.module.less';

/**
 * 创建一个 加载图片 dom对象
 * @returns 加载图片对象
 */
function createdImg() {
  let img = document.createElement('img');
  img.src = loading;
  img.className = style.loading;
  img.dataset.mark = 'loading-img';
  return img;
}

/**
 * 判断一个容器中是否包含指定的img元素
 * @param {*} el 容器元素
 * @returns 是否存在指定 img 元素，有则返回
 */
function haveImg(el) {
  let img = el.querySelector('img[data-mark=loading-img]');
  return img;
}
export default function (el, binding) {
  // 当在加载中，则显示图片；
  // 加载完毕，不显示图片；
  let img = haveImg(el);
  if (!binding.value) { // 当未加载完毕，并且容器中没有 加载动画的元素的时候创建一个加载图片对象
    if (!img) {
      let loading = createdImg();
      el.append(loading)
    }
  } else { // 当加载完毕，并且容器中有 img 元素的时候，删除 img 元素；
    if (img) {
      img.remove();
    }
  }
}